<template>
	<div>
	<div class="box">
		<div class="flex" style="align-items: center;">
			<img src="../../img/flover.png" width="80" height="30" />
			<div class="colorfff f13 mgl-10">福为排队智能系统</div>
			<div style="width: 240px;text-align: center;border: 1px solid #fff; border-radius: 40px;margin-left: 280px;" class="colorfff f9">
				{{nowDate}}
			</div>
		</div>
		<div class="flex mgt-10">
		<table style="background-color: #CFE4F7;">
			<tbody>
				<van-swipe class="my-swipe" style='width: 630px;' :autoplay="30000" indicator-color="white">
				  <van-swipe-item v-for="(item,i) in list" :key='i'>
					  <th class="f12 colort" style="width: 130px;">房间号</th>
					  <th class="f12 colort" style="width: 240px;">祭拜中</th>
					  <th class="f12 colort" style="width: 240px;">待祭拜</th>
					  <tr v-for="items in item" v-bind:key="items.roomId" style="background-color: #E4F2FF;">
					  	
					  	<td style="background-color: #213776;" class="pdl-5 pdr-5 pdt-5 pdb-5 colorfff f9">{{items.roomId}}号房间</td>
					  	<td v-if="items.firstNo"class="f9 center">{{items.firstNo}}号 {{items.firstName}} 祭拜中</td>
					  	<td v-if="!items.firstNo"class="f9 center">无</td>
					  	<td v-if="items.secondNo"class="f9 center">{{items.secondNo}}号 {{items.secondName}} 待祭拜</td>
					  	<td v-if="!items.secondNo"class="f9 center">无</td>
					  </tr>
				  </van-swipe-item>
				</van-swipe>
				
			</tbody>
		</table>
		<div style="width: 280px; height: 600px; background-color: #267aec; border-radius: 10px;margin-left: 30px;padding: 10px 10px 0 10px;" class="colorfff f7 wordW14">
			尊敬的用户：</br>
			1.请您现在小程序上预约祭拜服务，并根据时间流程线上的“签到排队与检码进场”环节提示打开二维码，前往接待台扫码签到，获得祭拜的房间号和排队号。</br>
			2.排队信息将展示在本屏幕上，用户进入祭拜房间前需要再次打开上述环节的二维码进行进场的身份检码，时间为60秒，超时需要重新到接待台签到，请留意。
		</div>
		</div>
	</div>
	<div style="background-color: #2D2D2D;padding: 5px 15px;" class="flex">
		<div class="colorfff wxts f10 center">温馨提示:</div>
		<div style="color: #69E75B;" class=" f10 mgl-10">请未叫到号的亲友耐心等待，保持安静~</div>
	</div>
	</div>
</template>

<script>
	import {
		format,
		ossUri
	} from '../../utils/tool.js';


	export default {
		name: 'main',
		data() {
			return {
				list: [],
				nowDate:''
			};
		},
		activated() {

		},
		created() {
			this.signInList();
			let that = this;
			setInterval(function(){
				that.signInList();
			},2500)
			setInterval(function(){
				var date = new Date();
				that.nowDate = date.toLocaleDateString()+date.toLocaleTimeString();
			},1000)
		},
		methods: {
			signInList() {
				//获取列表
				this.$api.reserve.signInList().then(d => {
					if (d.code == 1 && d.data) {
						this.list=[];
						d.data.forEach(i => {
							var info = {};
							info.roomId = i.roomId;
							var queue = i.queue;
							console.log(queue)
							if (queue.length >= 1) {
								info.firstId = queue[0].customerId;
								info.firstNo = queue[0].serialNum;
								info.firstName = queue[0].customerName;
							}
							if (queue.length >= 2) {
								info.secondId = queue[1].customerId;
								info.secondNo = queue[1].serialNum;
								info.secondName = queue[1].customerName;
							}
							if (queue.length >= 3) {
								info.thirdId = queue[2].customerId;
								info.thirdNo = queue[2].serialNum;
								info.thirdName = queue[2].customerName;
							}
							this.list.push(info);
						})
						var result = [];
						for(var i=0,len=this.list.length;i<len;i+=5){
						result.push(this.list.slice(i,i+5));
						}
						this.list= result;
					} else {
						console.log('erorr....');
					}
				}).catch(e => {
					console.log(e)
				})
			},

		},
		components: {

		}
	};
</script>

<style lang="less">
	.box {
		background-color: #165FC4;
		height: 100%;
		padding: 10px;
	}

	// th,
	// td {
	// 	border: 1px solid #f2f2f2;
	// 	padding: 8px;
	// 	font-size: 0.3125rem;
	// }
	.colort{
		color: #213776;
	}
	.wxts{
		background: url(../../img/bottom.png);
		background-size: 100% 100%;
		padding: 0 15px;
	}
</style>
